import React from 'react'
import {Progress, Rate, Icon, Spin} from 'antd'
import Request from '../../utils/request'
import MusicList from '../list';
import styles from './index.less'

export default class Music extends React.Component {

  constructor(props) {
    super(props);
    this.state = {
      volume: 2,  // 当前音量
      album: '',  // 歌名
      thumb: '',  // 封面
      current: 0,
      rest: 0,
      mute: false,  // 静音
      systemChange: props.systemChange,
      updateList: props.updateList,
      list: [], // 播放列表
      play: false,
    };
    this.getSong();
    this.getSongList();
  }

  render() {
    const current = this.formatTime(this.state.current),
      rest = this.formatTime(this.state.rest);
    const stopCName = this.state.mute || !this.state.play ? styles.stop : '';
    return (
      <div className={styles.container}>
        <img 
        className={styles.background} 
        src={this.state.thumb} 
        onMouseMove={this.stopMove.bind(this)} 
        />
        <div className={styles.music}>
          <div className={styles.bg} onClick={this.bgClick.bind(this)}>
            <div className={styles.black}></div>
            <div className={styles.red}></div>
            {
              this.state.thumb ?
              <img 
              className={styles.img + ' ' + styles.rotate + ' ' + stopCName}
              src={this.state.thumb}
              /> :
              <Spin size='large' style={{position:'absolute'}} />
            }
          </div>
          <div className={styles.content}>
            <div className={styles.info}>
              <span>正在播放</span>
              <span>{this.state.album}</span>
            </div>
            <div className={styles.lyric}>
              {
                this.state.lyric ?
                '歌词大意' :
                '暂无歌词'
              }
            </div>
            <div className={styles.process}>
              <div className={styles.time}>
                <span>
                  {this.state.rest ? current : <Spin size='small' />}
                </span>
                <span>
                  {this.state.rest ? rest : <Spin size='small' />}
                </span>
              </div>
              <Progress 
              percent={100} 
              successPercent={this.state.process} 
              strokeColor='#acece6' 
              showInfo={false} 
              status="active"
              />
              <div className={styles.volume}>
                <Rate 
                character={<Icon type="sound" />} 
                allowHalf 
                value={this.state.volume} 
                onHoverChange={this.hoverChange.bind(this)}
                />
              </div>
            </div>
          </div>
          <audio ref='audio'></audio>
        </div>
        <MusicList list={this.state.list} />
      </div>
    );
  }

  stopMove(e) {
    e.preventDefault();
  }

  hoverChange(value) {
    if (value !== undefined && !this.state.mute) {
      this.refs.audio.volume = value / 5;
      this.setState({
        volume: value
      });
    }
  }

  bgClick() {
    let mute = !this.state.mute,
      volume = mute ? 0 : 2,
      update = {};
    if (!this.state.play) {
      this.refs.audio.play();
      volume = 2;
      update.play = true;
      mute = false;
    }
    this.refs.audio.volume = volume / 5;
    this.setState({
      ...update,
      mute,
      volume
    });
  }

  getSong() {
    return Request.get('/song/current/detail')
    .then(result => {
      if (result && result.code === 200) {
        this.loadMusic(result);
        this.initMusic(result);
        return;
      }
    });
  } 

  getSongList() {
    Request.get('/song/list')
      .then(result => {
        if (result && result.code === 200) {
          this.setState({
            list: result.data
          });
        }
      })
  }

  componentWillReceiveProps(next) {
    if (next.systemChange !== this.state.systemChange) {
      this.getSong();
    }
    if (next.updateList !== this.state.updateList) {
      this.getSongList();
    }
  }

  initMusic(result) {
    this.timer && clearInterval(this.timer);
    const music = result.data;
    this.setState({
      album: result.data.album,
      thumb: result.data.thumb,
    });
    this.timer = setInterval(() => {
      let current = 0, rest = 0, process = 0;
      music.current += 1;
      if (music.current <= music.duration) {
        current = music.current;
        rest = music.duration - current;
        process = ((current / music.duration) * 100).toFixed(2);
      }
      this.setState({
        current,
        rest,
        process,
      });
    }, 1000);
  }

  formatTime(second) {
    let s = second % 60;
    second -= s;
    let m = second / 60;
    let mm = m % 60;
    let h = Math.floor(m / 60);
    return `${this.padding(h)}:${this.padding(mm)}:${this.padding(s)}`;
  }

  padding(s) {
    return (s + '').padStart(2, '0');
  }

  loadMusic(result) {
    const audio = this.refs.audio;
    audio.src = result.data.url;
    audio.currentTime = result.data.current;
    audio.volume = this.state.volume / 5;
    if (this.state.play) {
      audio.play();
    }
  }

}